<!-- 区域的组件 -->
<template>

  <el-row>

    <el-collapse :accordion="widget.options.accordion">
      <el-collapse-item v-for="(item,tabIndex) in widget.options.options" :key="tabIndex" :name="item.value" :label="item.value" :title="item.value">
        <div v-for="(column) in columns[tabIndex]" :key="column.key">
          <el-col :span="column.options !== undefined && column.options.span" class="drag-widget field-item">

            <div v-if="column.model">
              <el-form-item

                :label="column.name"
                :prop="widget.model+'.'+tabIndex+'.'+column.model"
                :rules="column.rules?column.rules:[]"
                :class="{'is_req': column.options.required,'display':'block'}"
              >
                <GenerateElementItem
                  v-model="value[tabIndex][column.model]"
                  :blanks="blanks"
                  is-table="block"
                  :path="widget.model+'.'+tabIndex+'.'+column.model"
                  :models_temp="models_temp"
                  :widget="column"
                  :remote="remote"
                  :models.sync="dataModels"
                  :strut-all="strutAll"
                  :index="2"
                />
              </el-form-item>

            </div>

          </el-col>
        </div>
      </el-collapse-item>

    </el-collapse>

  </el-row>

</template>

<script>
import { verification } from '../../router/verification.js'

// eslint-disable-next-line no-unused-vars
function isInArray(arr, value) {
  for (var i = 0; i < arr.length; i++) {
    if (value === arr[i]) {
      return true
    }
  }
  return false
}
export default {

  components: {
    GenerateElementItem: () => import('../../GenerateElementItem.vue')
  },
  props: ['columns', 'value', 'models', 'remote', 'blanks', 'models_temp', 'widget', 'strutAll', 'data', 'path', 'tabIndex'],
  data() {
    // console.log(this.columns[0].options.defaultValue);
    return {
      tableData: this.value,
      dataModels: this.models,
      checkedCities: [],
      dialogVisible: false
    }
  },
  watch: {
    /* value (val) {
                this.tableData = val
            },
            tableData (val) {
                this.$emit('input', val)
            },
            dataModels: {
                deep: true,
                handler (val) {
                    this.$emit('update:models', val)
                }
            },
            models: {
                deep: true,
                handler (val) {
                    this.dataModels = val
                }
            }*/
  },
  created() {
    var tableColumns = this.widget.tabColumns
    for (var i = 0; i < tableColumns.length; i++) {
      for (var j = 0; j < tableColumns[i].length; j++) {
        if (tableColumns[i][j].rules) {
          for (var k = 0; k < tableColumns[i][j].rules.length; k++) {
            tableColumns[i][j].rules[k].validator = this.validatePass
          }
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      // eslint-disable-next-line no-unused-vars
      var index = tab.index
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback, this)
    },
    handleAddRow() {
      // eslint-disable-next-line no-unused-vars
      var dataModels = this.dataModels
      const item = {}
      if (this.columns !== undefined) {
        if (this.columns.length > 0) {
          for (let i = 0; i < this.columns.length; i++) {
            item[this.columns[i].model] = ''
          }
        }
      }
      this.tableData.push(item)
    },
    handleRemove(index) {
      this.tableData.splice(index, 1)
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true
        }
      }
      return false
    },
    handleImport() {

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleCheckedCitiesChange(value) {
      this.checkedCities = value
    }

  }

}
</script>

<style lang="scss">
    .row-bd{
        border: 1px solid #EBEEF5;
        padding-top:12px;
    }
    .addRow{
        display: block !important;
        margin-top: 18% !important;
    }
    .is_req {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
</style>

